<template>
    <div>
        <!-- 研发投入 -->
         <!-- :dialog-style="{ top: '20px' }" -->
        <a-modal
         v-model:visible="visible" 
         :title="formState.id?(formState.view?'查看':'编辑'):'新增'" 
         @ok="handleOk" 
         @cancel="visible = false"
         class="enterprise-addEdit5-modal-5"
         width="80%"
         :footer="null"
        >
            <div v-if="visible">
                <a-form :form="form" layout="horizontal" class="form-descriptions-content-box">
                    <a-descriptions :column="3" bordered >
                        <a-descriptions-item >
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText">*</span>
                                姓名
                            </span>
                            <a-form-item class="zm-form-model">
                                <span v-if="formState.view">{{ formState.fgjry }}</span>
                                <a-input
                                    v-else
                                    v-model:value="formState.fgjry" 
                                    placeholder="请输入姓名"
                                    v-decorator="[
                                        'fgjry', { initialValue:formState.fgjry, rules: rules.fgjry}
                                    ]"
                                />
                            </a-form-item>
                        </a-descriptions-item>
                        
                        <a-descriptions-item >
                            <span slot="label" class="descriptions-label-slot">
                                学历
                            </span>
                            <a-form-item class="zm-form-model">
                                <span v-if="formState.view">{{ formState.fxl }}</span>
                                <a-input
                                    v-else
                                    v-model:value="formState.fxl" 
                                    placeholder="请输入学历"
                                    v-decorator="[
                                        'fxl', { initialValue:formState.fxl, rules: rules.fxl}
                                    ]"
                                />
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item >
                            <span slot="label" class="descriptions-label-slot">
                                专业
                            </span>
                            <a-form-item class="zm-form-model">
                                <span v-if="formState.view">{{ formState.fzy }}</span>
                                <a-input
                                    v-else
                                    v-model:value="formState.fzy" 
                                    placeholder="请输入专业"
                                    v-decorator="[
                                        'fzy', { initialValue:formState.fzy, rules: rules.fzy}
                                    ]"
                                />
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item >
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText">*</span>
                                身份证件类型
                            </span>
                            <a-form-item class="zm-form-model">
                                <span v-if="formState.view">{{ formState.fzjlx }}</span>
                                <a-select
                                    v-else
                                    placeholder="请选择部门经办人"
                                    style="width: 100%"
                                    v-model:value="formState.fzjlx"
                                    v-decorator="[
                                        'fzjlx', { initialValue:formState.fzjlx, rules: rules.fzjlx}
                                    ]"
                                >
                                    <a-select-option v-for="(item,index) in IDtypeList" :key="index" :value="item.value">
                                        {{ item.label}}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item :span="2">
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText">*</span>
                                证件号码
                            </span>
                            <a-form-item class="zm-form-model">
                                <span v-if="formState.view">{{ formState.fsfzh }}</span>
                                <a-input
                                    v-else
                                    v-model:value="formState.fsfzh" 
                                    placeholder="请输入证件号码"
                                    v-decorator="[
                                        'fsfzh', { initialValue:formState.fsfzh, rules: rules.fsfzh}
                                    ]"
                                />
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item >
                            <span slot="label" class="descriptions-label-slot">
                                职务
                            </span>
                            <a-form-item class="zm-form-model">
                                <span v-if="formState.view">{{ formState.fzw }}</span>
                                <a-input
                                    v-else
                                    v-model:value="formState.fzw" 
                                    placeholder="请输入职务"
                                    v-decorator="[
                                        'fzw', { initialValue:formState.fzw, rules: rules.fzw}
                                    ]"
                                />
                            </a-form-item>
                        </a-descriptions-item>
                        
                        <a-descriptions-item >
                            <span slot="label" class="descriptions-label-slot">
                                职称
                            </span>
                            <a-form-item class="zm-form-model">
                                <span v-if="formState.view">{{ formState.fzc }}</span>
                                <a-input
                                    v-else
                                    v-model:value="formState.fzc" 
                                    placeholder="请输入职称"
                                    v-decorator="[
                                        'fzc', { initialValue:formState.fzc, rules: rules.fzc}
                                    ]"
                                />
                            </a-form-item>
                        </a-descriptions-item>
                        
                        <a-descriptions-item >
                            <span slot="label" class="descriptions-label-slot">
                                部门
                            </span>
                            <a-form-item class="zm-form-model">
                                <span v-if="formState.view">{{ formState.fbm }}</span>
                                <a-input
                                    v-else
                                    v-model:value="formState.fbm" 
                                    placeholder="请输入部门"
                                    v-decorator="[
                                        'fbm', { initialValue:formState.fbm, rules: rules.fbm}
                                    ]"
                                />
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item >
                            <span slot="label" class="descriptions-label-slot">
                                从事年限
                            </span>
                            <a-form-item class="zm-form-model">
                                <span v-if="formState.view">{{ formState.fcsnx }}</span>
                                <a-input
                                    v-else
                                    v-model:value="formState.fcsnx" 
                                    placeholder="请输入从事年限"
                                    v-decorator="[
                                        'fcsnx', { initialValue:formState.fcsnx, rules: rules.fcsnx}
                                    ]"
                                />
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item >
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText">*</span>
                                联系手机
                            </span>
                            <a-form-item class="zm-form-model">
                                <span v-if="formState.view">{{ formState.flxdh }}</span>
                                <a-input
                                    v-else
                                    v-model:value="formState.flxdh" 
                                    placeholder="请输入联系手机"
                                    v-decorator="[
                                        'flxdh', { initialValue:formState.flxdh, rules: rules.flxdh}
                                    ]"
                                />
                            </a-form-item>
                        </a-descriptions-item>
                    </a-descriptions>
                </a-form>
            </div>
            <div style="
                display: flex; justify-content: flex-end;
                margin-top: 20px; width: 100%;
                background-color: #fff;">
                <a-button @click="visible = false">取消</a-button>
                <a-button v-if="!formState.view" style="margin: 0 20px;" class="blue-btn" type="primary" @click="handleOk(true)">保存</a-button>
                <a-button v-if="!formState.view" class="blue-btn" type="primary" @click="handleOk(false)">保存并关闭</a-button>
            </div>
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector.vue'
import moment from 'moment'
export default {
    components:{
        compSelector,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            formState:{},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            rules:{
                fgjry: [{
                    required: true,
                    message: '请输入姓名',
                    trigger: 'blur',
                }],
                fzjlx: [{
                    required: true,
                    message: '请输入身份证件类型',
                    trigger: 'blur',
                }],
                fsfzh: [{
                    required: true,
                    message: '请输入证件号码',
                    trigger: 'blur',
                }],
                flxdh: [{
                    required: true,
                    message: '请输入联系手机',
                    trigger: 'blur',
                }],
            },
            yearPickerKey:null,
            IDtypeList:[{
                label:'中华人民共和国居民身份证',
                value:'中华人民共和国居民身份证',
            },{
                label:'中华人民共和国军官证',
                value:'中华人民共和国军官证',
            },{
                label:'中华人民共和国警官证',
                value:'中华人民共和国警官证',
            },{
                label:'外国（地区）护照',
                value:'外国（地区）护照',
            },{
                label:'其他有效身份证件',
                value:'其他有效身份证件',
            }]
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        getData(val){
            this.formState = {}
            this.formState = {...val,}
        },
        handleOk(val){
            this.form.validateFields((err, values) => {
                if (!err) {
                    if(this.formState.id){
                        this.$emit('editItem',{
                            ...this.formState,
                            ...values,
                            fnf:moment(this.formState.fnf).format('YYYY'),
                        },val)
                    }else{
                        this.$emit('addItem',{
                            ...this.formState,
                            ...values,
                            fnf:moment(this.formState.fnf).format('YYYY'),//YYYY-MM-DD
                        },val)
                    }
                    
                }
            })
        },
    }
}
</script>
<style lang="less">
.enterprise-addEdit5-modal-5{
    .add-edit-form{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            display: flex;
            margin-bottom: 8px;
        }
        .ant-form-item-label{
            width: 110px;
        }
        .ant-form-item-control-wrapper{
            width: 100%;
        }
        .flex-1-box{
            width: 100%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .flex-05-box{
            width: 50%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
    }
}
</style>